<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
</head>

<body>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    .loadEffect {
      width: 100px;
      height: 100px;
      position: relative;
      margin: 0 auto;
      top: 26%;
    }

    .loadEffect span {
      animation: load 1.04s ease infinite;
      display: inline-block;
      width: 30px;
      height: 10px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      background: lightgreen;
      position: absolute;
    }

    .loadEffect span:nth-child(1) {
      left: 0;
      top: 50%;
      margin-top: -5px;
      animation-delay: 0.13s;
    }

    .loadEffect span:nth-child(2) {
      left: 10px;
      top: 20px;
      transform: rotate(45deg);
      animation-delay: 0.26s;
    }

    .loadEffect span:nth-child(3) {
      left: 50%;
      top: 10px;
      margin-left: -15px;
      transform: rotate(90deg);
      animation-delay: 0.39s;
    }

    .loadEffect span:nth-child(4) {
      top: 20px;
      right: 10px;
      transform: rotate(135deg);
      animation-delay: 0.52s;
    }

    .loadEffect span:nth-child(5) {
      right: 0;
      top: 50%;
      margin-top: -5px;
      transform: rotate(180deg);
      animation-delay: 0.65s;
    }

    .loadEffect span:nth-child(6) {
      right: 10px;
      bottom: 20px;
      transform: rotate(225deg);
      animation-delay: 0.78s;
    }

    .loadEffect span:nth-child(7) {
      bottom: 10px;
      left: 50%;
      margin-left: -15px;
      transform: rotate(270deg);
      animation-delay: 0.91s;
    }

    .loadEffect span:nth-child(8) {
      bottom: 20px;
      left: 10px;
      transform: rotate(315deg);
      animation-delay: 1.04s;
    }

    @keyframes load {
      0% {
        opacity: 1;
      }

      100% {
        opacity: 0.2;
      }
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    #loading {
      background-color: #181e20;
      opacity: 0.5;
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 999;
    }
  </style>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .progress {
      margin-top: 30px;
    }

    .down_span {
      color: #dfdede;
      font-size: 14px;
      font-weight: lighter;
    }

    h3,
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .scrollbox {
      width: 268px;
      margin: 0 auto;
    }

    #scrollDiv {
      width: 268px;
      height: 280px;
      overflow: hidden;
    }

    /*这里的高度和超出隐藏是必须的*/
    #scrollDiv ul li {
      height: 66px;
      width: 259px;
      background-color: #07325e;
      overflow: hidden;
      margin-bottom: 4px;
      color: #dfdede;
      font-size: 14px;
      padding: 0 9px 0 9px;
      line-height: 30px;
      position: relative;
    }

    #scrollDiv ul li span {
      position: absolute;
      bottom: 5px;
      right: 16px;
      display: block;
      width: 68px;
      height: 18px;
      text-align: center;
      color: #081e49;
      background-color: #69c200;
      line-height: 18px;
    }

    .sent-div {
      width: 98%;
      height: 98%;
      margin: 0 auto;
    }
  </style>
  <title>前工序-搅拌工序设备</title>
  <div id="loading">
    <div class="loadEffect">
      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
  </div>
  <div id="app">
    <div id="main">
      <!--标题栏-->
      <div class="Hometitlebox">
        <a style="color: #00e4ff" href="#">前工序-搅拌工序设备</a>
      </div>
      <!--动效显示-->
      <div class="flasheffectoutbox" style="transform: scale(1.2, 1.2)">
        <div style="width: 1000px; height: 500px; position: relative">
          <div class="line2 line"></div>
          <div class="line3 line"></div>
          <div class="line4 line"></div>
          <div class="line5 line"></div>
          <div class="line6 line"></div>
          <!--主动效-->
          <div class="maineffectoutbox circleeffectclass">
            <a href="#">
              <img class="effectposition maindataeffect" src="img/maindataeffect.png" />
              <div class="effectposition acrossremindeffectout" style="width: 76px; height: 76px; margin: 9px">
                <div class="acrossremindeffectin" style="width: 68px; height: 68px; margin: 4px"></div>
              </div>
              <img class="effectposition maindataspecialeffect" src="img/maindataspecialeffect.png" />
              <img class="effectposition acrossremindeffecindex" src="img/system.png" style="
                transform: scale(0.4, 0.4);
                position: absolute;
                top: 12px;
                left: 9px;
              " />
              <span class="stagetitle">搅拌中控系统</span>
            </a>
          </div>
          <!--卫星动效-->
          <div class="circleeffectclass aroundfunctioneffect" style="left: 254px; top: 135px">
            <img class="effectposition arounddataeffect02" src="img/aroundeffect.png" />
            <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
              <div class="acrossremindeffectin acrossremindeffectinard"></div>
            </div>
            <img class="effectposition acrossremindeffecindex" src="img/solvent.png"
              style="transform: scale(0.5, 0.5)" /><span class="stagetitle stagearoundtitle">溶剂系统</span>
          </div>
          <div class="circleeffectclass aroundfunctioneffect" style="left: 190px; bottom: 89px">
            <img class="effectposition arounddataeffect01" src="img/aroundeffect.png" />
            <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
              <div class="acrossremindeffectin acrossremindeffectinard"></div>
            </div>
            <img class="effectposition acrossremindeffecindex" src="img/transport.png"
              style="transform: scale(0.55, 0.55)" /><span class="stagetitle stagearoundtitle">浆料系统</span>
          </div>
          <div id="pulpingButton" class="circleeffectclass aroundfunctioneffect" style="right: 405px; bottom: 53px">
            <img class="effectposition arounddataeffect02" src="img/aroundeffect.png" />
            <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
              <div class="acrossremindeffectin acrossremindeffectinard"></div>
            </div>
            <img class="effectposition acrossremindeffecindex" src="img/pulping.png"
              style="transform: scale(0.6, 0.6); position: absolute; left: -1px" /><span
              class="stagetitle stagearoundtitle">制浆系统</span>
          </div>
          <div id="mixingButton" class="circleeffectclass aroundfunctioneffect" style="right: 243px; bottom: 165px">
            <img class="effectposition arounddataeffect01" src="img/aroundeffect.png" />
            <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
              <div class="acrossremindeffectin acrossremindeffectinard"></div>
            </div>
            <img class="effectposition acrossremindeffecindex" src="img/mixing.png"
              style="transform: scale(0.64, 0.64)" /><span class="stagetitle stagearoundtitle">搅拌系统</span>
          </div>
          <div class="circleeffectclass aroundfunctioneffect" style="right: 294px; top: 79px">
            <img class="effectposition arounddataeffect03" src="img/aroundeffect.png" />
            <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
              <div class="acrossremindeffectin acrossremindeffectinard"></div>
            </div>
            <img class="effectposition acrossremindeffecindex" src="img/powder.png"
              style="position: absolute; top: 3px; transform: scale(0.56, 0.56)" /><span
              class="stagetitle stagearoundtitle">粉料系统</span>
          </div>
          <div class="circleeffectclass decarround01" style="top: 218px; left: 92px">
            <div class="acrossremindeffectin decarroundin01" style=""></div>
          </div>
          <div class="circleeffectclass decarround01" style="top: 197px; right: 163px">
            <div class="acrossremindeffectin decarroundin01" style=""></div>
          </div>
          <div class="circleeffectclass decarround02" style="top: 99px; right: 93px">
            <div class="acrossremindeffectin decarroundin02" style=""></div>
          </div>
        </div>
      </div>
      <!--弹出功能-->
      <div class="popuofunxtionbox">
        <!--标题-->
        <div class="popupboxtitlebox">
          <span class="popupboxtitlemsg">xxxx审批系统数据分析</span>
          <div class="popupboxclose"></div>
        </div>
      </div>
      <!--侧边浮窗-->
      <div class="fltoutbox leftbox">
        <div style="height: 65px; padding-top: 25px; padding-left: 15px">
          <span class="analyzedatashowtitle">【各系统报警统计】</span>
        </div>
        <!--左上分析内容放置框-->
        <div class="analyzemsgbgbox" style="margin-left: 2px">
          <div class="sent-div" id="container1"></div>
          <div class="fltdecarround fltdecarroundleft fltdecarroundbottom"></div>
          <div class="fltdecarround fltdecarroundbottom fltdecarroundright"></div>
        </div>
        <!--左下分析内容放置框-->
        <div class="analyzemsgbgbox" style="margin-top: 20px; height: 350px">
          <span class="analyzedatashowtitle" style="line-height: 66px; margin-left: 38px">【本日设备工作日志】</span>
          <div class="scrollbox">
            <div id="scrollDiv">
              <ul>
                <li>阳极搅拌12号机搅拌完工。 <span>3次</span></li>
                <li>阳极搅拌5号机粉料投料。<span>2次</span></li>
                <li>
                  阴极3号机搅拌中控 CPU 占用过高 71% 。
                  <span>22次</span>
                </li>
                <li>
                  阴极搅拌1号机搅拌完工。 <span>2次</span>
                </li>
                <li>
                  阳极6号机搅拌完工。 <span>3次</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="fltdecarround fltdecarroundleft fltdecarroundtop"></div>
          <div class="fltdecarround fltdecarroundtop fltdecarroundright"></div>
          <div class="fltdecarround fltdecarroundleft fltdecarroundbottom"></div>
          <div class="fltdecarround fltdecarroundbottom fltdecarroundright"></div>
        </div>
      </div>
      <div class="fltoutbox rightbox">
        <div style="height: 36px; padding-top: 25px">
          <span class="analyzedatashowtitle">【今日设备在线】</span>
        </div>
        <!--右上分析内容放置框-->
        <div class="analyzemsgbgbox" style="margin-right: 2px; padding-bottom: 29px">
          <div style="background-color: #022542; opacity: 0.9; height: 160px">
            <div style="padding: 10px 0 0 10px">
              <div class="l_left">
                <span style="color: #dfdede; font-size: 14px; margin-right: 4px">搅拌系统：</span>
              </div>
              <div class="progress l_left" id="vaderSize" style="width: 150px; padding: 0; margin-top: 6px"></div>
              <div class="l_left">
                <span style="color: #dd9809; margin-left: 4px; font-size: 14px;">43台</span>
              </div>
              <div class="clear"></div>
            </div>
            <div style="padding: 8px 0 0 10px">
              <div class="l_left">
                <span style="color: #dfdede; font-size: 14px; margin-right: 4px">制浆系统：</span>
              </div>
              <div class="progress l_left" id="vaderSize1" style="width: 150px; margin-top: 6px"></div>
              <div class="l_left">
                <span style="color: #00d8ff; margin-left: 4px; font-size: 14px">16台</span>
              </div>
              <div class="clear"></div>
            </div>
            <div style="padding: 8px 0 0 10px">
              <div class="l_left">
                <span style="color: #dfdede; font-size: 14px; margin-right: 4px">粉料系统：</span>
              </div>
              <div class="progress l_left" id="vaderSize2" style="width: 150px; margin-top: 6px"></div>
              <div class="l_left">
                <span style="color: #56a4ff; margin-left: 4px; font-size: 14px">37台</span>
              </div>
              <div class="clear"></div>
            </div>
            <div style="padding: 8px 0 0 10px">
              <div class="l_left">
                <span style="color: #dfdede; font-size: 14px; margin-right: 4px">溶剂系统：</span>
              </div>
              <div class="progress l_left" id="vaderSize3" style="width: 150px; margin-top: 6px"></div>
              <div class="l_left">
                <span style="color: #56ff6a; margin-left: 4px; font-size: 14px">33台</span>
              </div>
              <div class="clear"></div>
            </div>
            <div style="padding: 8px 0 0 10px">
              <div class="l_left">
                <span style="color: #dfdede; font-size: 14px; margin-right: 4px">浆料系统：</span>
              </div>
              <div class="progress l_left" id="transportSize" style="width: 150px; margin-top: 6px"></div>
              <div class="l_left">
                <span style="color: lightblue; margin-left: 4px; font-size: 14px">33台</span>
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <div>
            <p style="color: #dfdede; font-size: 14px; margin: 22px 0 0 17px">
              【今日设备在线】
            </p>
            <div class="progress l_left" id="vaderSize4" style="width: 200px; padding: 0; margin: 30px 0 0 18px"></div>
            <div class="l_left" style="color: #ffea00; margin: 44px 0 0 4px; font-size: 14px">
              <span>8/15</span>
            </div>
          </div>
          <div class="fltdecarround fltdecarroundleft fltdecarroundbottom"></div>
          <div class="fltdecarround fltdecarroundbottom fltdecarroundright"></div>
        </div>
        <!--右下分析内容放置框-->
        <div class="analyzemsgbgbox" style="margin-top: 20px; height: 350px">
          <span class="analyzedatashowtitle">【各基地系统接入量】</span>
          <div style="
            margin: 0 6px;
            background-color: #011c2f;
            opacity: 0.8;
            padding: 8px 0 6px 0;
          ">
            <div>
              <div class="system-title">
                <span class="down_span">【蕉城基地】</span><span class="number-label">25</span>
              </div>
              <div style="margin: 5px 0 4px 12px">
                <div class="progress l_left" id="vaderSize5" style="width: 190px; padding: 0; margin-top: 4px"></div>
                <div>
                  <span class="l_left" style="margin-left: 12px; color: #40e315; font-size: 12px">8.02%</span>
                </div>
                <div class="clear"></div>
              </div>
              <div class="system-title">
                <span class="down_span">【xxx基地】</span><span class="number-label">xxx</span>
              </div>
              <div style="margin: 5px 0 4px 12px">
                <div class="progress l_left" id="vaderSize6" style="width: 190px; padding: 0; margin-top: 4px"></div>
                <div>
                  <span class="l_left" style="margin-left: 12px; color: #15e3ac; font-size: 12px">8.09%</span>
                </div>
                <div class="clear"></div>
              </div>
              <div class="system-title">
                <span class="down_span">【xxx基地】</span><span class="number-label">xxx</span>
              </div>
              <div style="margin: 5px 0 4px 12px">
                <div class="progress l_left" id="vaderSize7" style="width: 190px; padding: 0; margin-top: 4px"></div>
                <div>
                  <span class="down_span l_left" style="margin-left: 12px; color: #1f9cff; font-size: 12px">2.87%</span>
                </div>
                <div class="clear"></div>
              </div>
              <div class="system-title">
                <span class="down_span">【xxx基地】</span><span class="number-label">xxx</span>
              </div>
              <div style="margin: 5px 0 4px 12px">
                <div class="progress l_left" id="vaderSize8" style="width: 190px; padding: 0; margin-top: 4px"></div>
                <div>
                  <span class="down_span l_left" style="margin-left: 12px; color: #c97802; font-size: 12px">0.85%</span>
                </div>
                <div class="clear"></div>
              </div>
              <div class="system-title">
                <span class="down_span">【xxx基地】</span><span class="number-label">xxx</span>
              </div>
              <div style="margin: 5px 0 4px 12px">
                <div class="progress l_left" id="vaderSize9" style="width: 190px; padding: 0; margin-top: 4px"></div>
                <div>
                  <span class="l_left" style="margin-left: 12px; color: #72ff00; font-size: 12px">80.44%</span>
                </div>
                <div class="clear"></div>
              </div>
              <div class="system-title">
                <span class="down_span">【xxx基地】</span><span class="number-label">xxx</span>
              </div>
              <div style="margin: 5px 0 4px 12px">
                <div class="progress l_left" id="vaderSize10" style="width: 190px; padding: 0; margin-top: 4px"></div>
                <div>
                  <span class="l_left" style="margin-left: 12px; color: #ef4503; font-size: 12px">2.56%</span>
                </div>
                <div class="clear"></div>
              </div>
            </div>
          </div>
          <div class="fltdecarround fltdecarroundleft fltdecarroundtop"></div>
          <div class="fltdecarround fltdecarroundtop fltdecarroundright"></div>
          <div class="fltdecarround fltdecarroundleft fltdecarroundbottom"></div>
          <div class="fltdecarround fltdecarroundbottom fltdecarroundright"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>